<template>
  <div>
    <ElForm :model="student" ref="myForm" :rules="rules" label-width="80px">
      <ElFormItem label="用户名" prop="uName">
        <ElInput v-model="student.sName" placeholder="请输入用户名"></ElInput>
      </ElFormItem>
      <ElFormItem label="密码" prop="uName">
        <ElInput v-model="student.sPwd" placeholder="请输入密码"></ElInput>
      </ElFormItem>
      <ElFormItem label="性别" prop="gender">
        <el-radio v-model="student.gender" label="1">男</el-radio>
        <el-radio v-model="student.gender" label="0">女</el-radio>
      </ElFormItem>
      <ElFormItem label="邮箱地址" prop="email">
        <ElInput
          v-model="student.email"
          placeholder="请输入正确的邮箱地址"
        ></ElInput>
      </ElFormItem>
      <ElFormItem label="兴趣爱好" prop="hobby">
        <el-checkbox-group v-model="student.hobby">
          <el-checkbox label="游泳" name="hobby"></el-checkbox>
          <el-checkbox label="打球" name="hobby"></el-checkbox>
          <el-checkbox label="看书" name="hobby"></el-checkbox>
          <el-checkbox label="听音乐" name="hobby"></el-checkbox>
        </el-checkbox-group>
      </ElFormItem>
      <ElFormItem>
        <el-button type="primary" @click="onSubmit('myForm')">注册</el-button>
        <el-button @click="resetForm('myForm')" type="info" plain
          >登录</el-button
        >
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        id: "",
        sName: "",
        uPwd: "",
        gender: "",
        hobby: [],
        email: "",
      },
    };
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        let data = this.student;
        if (valid) {
          this.$axios({
            method: "post",
            url: "http://localhost:5000/api/students",
            data,
          }).then((res) => {
            if (res.data.errno == 0) {
              this.getUsers();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
